<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">排口管理</text>
				<view style="margin-left: 10upx;" @click="showDrawer">
					<uni-icons type="search" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content padding">
			<view class="page-flex-title">
				<!-- 当前排口： -->
				<lb-picker v-model="query.outletId" :list="outlets" :props="pickerProps"  @confirm="(e)=>pickerSelectConfim('outlet',e)">
					<view slot="header-top">
						<view style="padding: 3upx;">
							<uni-easyinput type="text" v-model="searchText" placeholder="请输入关键字" prefixIcon="search" @input="searchOutlet" />
						</view>
					</view>
					<view class="lb-picker-placeholder-panel" style="text-align: right;line-height: 1.2;">
						<text v-if="outletName" style="border: 0;" class="lb-picker-text">{{outletName}}</text>
						<text v-else class="lb-picker-placeholder" style="border: 0;">请选择排口</text>
						<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
					</view>
				</lb-picker>
			</view>
			<view class="page-content-list">
				<block v-for="(value, index) in listData" :key="index">
					<view class="content-list-cell"  @click="goDetail">
						<view class="order-item">
							<view class="order-item-content">
								<view class="order-content-row">
									<view class="label">排口名称</view><view class="value" style="color: #299AEB;">{{value.outletName}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">MN</view><view class="value" style="color: #299AEB;" @click="handleCopy(value.outletMn)">{{value.outletMn}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">排放口类型</view><view class="value">{{value.outletTypeVal}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">所属企业</view><view class="value">{{value.enterpriseName || '- -'}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">排放状态</view><view class="value">{{value.outletStatusVal}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">停运状态</view><view class="value">{{value.outletStatus === 'e027_01' ? '启动':'停止'}}</view>
								</view>
								<!-- <view class="order-content-row">
									<view class="label">操作</view>
									<view class="value">
										<button class="order-btn">评价</button>
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>
		
		<uniDrawer ref="draw" :mask="true" mode='right' :width="250">
			<view style="height: 90upx;">&nbsp;</view>
			<view class="draw-panel">
				<view class="drawer-form">
					<!-- <view class="drawer-form-item">
						<view class="drawer-label"><text>区域</text></view>
						<view class="drawer-content">
							<text @click="showPkPicker">{{query.addressName || '请选择区域'}}</text>
							<tki-tree class="ipt-ctl" ref="tkitree" :selectParent="true" :range="range" :rangeKey="rangeKey" idKey="areacode" rangeKey="areaname" confirmColor="#4e8af7" @confirm="pkConfirm"/>
						</view>
					</view>
					<view class="drawer-form-item">
						<view class="drawer-label"><text>MN</text></view>
						<view class="drawer-content">
							<uni-easyinput class="ipt-ctl" type="number" v-model="query.outletMn" maxlength="8" placeholder="请输入MN" />
						</view>
					</view>
					<view class="drawer-form-item">
						<view class="drawer-label"><text>发布人</text></view>
						<view class="drawer-content">
							<lb-picker v-model="query.publisherId" :list="chooseUserListBak" :props="pickerUserProps" @confirm="(e)=>pickerSelectConfim('publisher',e)">
								<view slot="header-top">
									<view style="padding: 10upx;">
										<uni-easyinput type="text" v-model="searchText" placeholder="请输入关键字" prefixIcon="search" @input="search" />
									</view>
								</view>
								<view class="lb-picker-placeholder-panel">
									<text v-if="query.publisherName" class="lb-picker-text">{{query.publisherName}}</text>
									<text v-else class="lb-picker-placeholder">请选择发布人</text>
								</view>
							</lb-picker>
						</view>
					</view>
					<view class="drawer-form-item"> 
						<view class="drawer-label"><text>责任人</text></view>
						<view class="drawer-content">
							<lb-picker v-model="query.responsibilityId" :list="chooseUserListBak2" :props="pickerUserProps" @confirm="(e)=>pickerSelectConfim('responsibility',e)">
								<view slot="header-top">
									<view style="padding: 10upx;">
										<uni-easyinput type="text" v-model="searchText2" placeholder="请输入关键字" prefixIcon="search" @input="search2" />
									</view>
								</view>
								<view class="lb-picker-placeholder-panel">
									<text v-if="query.responsibilityName" class="lb-picker-text">{{query.responsibilityName}}</text>
									<text v-else class="lb-picker-placeholder">请选择责任人</text>
								</view>
							</lb-picker>
						</view>
					</view>-->
					<view class="drawer-form-item">
						<view class="drawer-label"><text>排口</text></view>
						<view class="drawer-content">
							<text @click="showPkPicker">{{outletName || '请选择排口'}}</text>
							<tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey" confirmColor="#4e8af7" @confirm="pkConfirm"/>
						</view>
					</view>
				</view>
				<view class="operation-panel">
					<view class="item-card">
						<view class="card-title">
							<uni-icons class="icon left" type="gear" size="20" color="#156dac"></uni-icons>
							<text class="content">排放类型</text>
							<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
						</view>
						<view class="operation-panel flex" style="padding: 20upx 0 0  0;">
							<view 
								v-for="(item,index) in outletTypes" 
								class="item-btn mini auto" 
								:class="query.outletType === (item.code)?'':'white'" 
								@click="pickerConfim('outletType',item)" 
								:key="index"
							>
								<text>{{item.codeName}}</text>
							</view>
						</view>
					</view>
					<view class="item-card">
						<view class="card-title">
							<uni-icons class="icon left" type="flag" size="20" color="#156dac"></uni-icons>
							<text class="content">排放状态</text>
							<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
						</view>
						<view class="operation-panel flex" style="padding: 20upx 0 0  0;">
							<view 
								v-for="(item,index) in outletStatuss" 
								class="item-btn mini auto" 
								:class="query.outletStatus === (item.code)?'':'white'" 
								@click="pickerConfim('outletStatus',item)" 
								:key="index"
							>
								<text>{{item.codeName}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-panel">
					<!-- <view class="item-btn green lp"><text>重置</text></view> -->
					<view class="item-btn lp" @click="handleQuery"><text>确定</text></view>
				</view>
			</view>
		</uniDrawer>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import LbPicker from '@/components/lb-picker'
	import {getDict} from '@/common/dict.js'
	
	const getTree = '/base/area/tree'
	const getUser = '/system/user/getProjectPersonnel'
	// const listQuery = '/base/tOutletEquipment/listPage'
	const listQuery = '/base/outlet/listPage'
	const getTree2 = '/base/outlet/listTree'
	export default {
		components:{
			uniIcons,
			uniLoadMore,
			uniDrawer,
			LbPicker,
			tkiTree
		},
		data() {
			return {
				reload: false,
				listData: [],
				last_id: '',
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pickerUserProps: {
					label: 'realName',
					value: 'id',
				},
				pickerProps: {
					label: 'name',
					value: 'id',
				},
				searchText: '',
				searchText2: '',
				range: [],
				rangeKey: 'name',
				outletName: '',
				query: {
					total: 0,
					page: 1,
					limit: 10,
					arrAddress: '',
					addressName: '',
					outletMn: '',
					outletType: '',
					outletTypeName: '',
					outletStatus: '',
					outletStatusName: '',
					// 发布人 责任人
					responsibilityId: '',
					responsibilityName: '',
					publisherId: '',
					publisherName: '',
					// id: null
				},
				outlets:[],
				outletsBak: [],
				dept: '',
				companyName: '',
				// 字典
				outletTypes: [],
				outletStatuss: [],
				chooseUserList: [],
				chooseUserListBak: [],
				chooseUserListBak2: [],
			}
		},
		onLoad() {
			
			// this.getTreeData();
			this.getTreeData2();
			this.initUserList()
			this.getList();
			// 字典
			this.outletTypes = [{code:'',codeName:'全部'},...getDict('e012')]
			this.outletStatuss = [{code:'',codeName:'全部'},...getDict('e027')]
		},
		onPullDownRefresh() {
			this.last_id = '';
			this.listData =  []
			this.getList();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},100)
		},
		onReachBottom() {
			this.status = 'more';
			this.query.page = this.query.page + 1
			this.getList(true);
		},
		methods: {
			searchOutlet(){
				if(this.outletsBak.length === 0){
					this.outletsBak = this.outlets
				}
				const newList = this.outletsBak.filter(item=>item.name.indexOf(this.searchText) !== -1)
				this.outlets = newList
			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},
			pkConfirm(e) {
				console.log(e)
				if(e.length > 0){
					const {id,name} = e[0]
					this.query.id = id
					this.outletName = name
					debugger
				}
			},
			getTreeData2() {
				this.$api.request(getTree2,{
					method: 'get',
				}).then(res=>{
					console.log(res)
					if(res.success){
						// 过滤无排口数据
						const result = []
						res.data.list.map(item=>{
							if(item.children && item.children.length > 0){
								result.push(item)
							}
						})
						this.range = result
						// 获取排口数组
						this.getFirstNode(result)
						
						// if(this.outlets.length > 0){
						// 	console.log(this.outlets)
						// 	const {id, name} = this.outlets[0]
						// 	this.query.outletId = id
						// 	this.query.outletName = name
						// 	this.getList()
						// }else{
						// 	this.status = ''
						// }
					}
				}).catch(()=>{
				})
			},
			getFirstNode (tree) {
				tree.forEach(arr => {
					this.recursion(arr)
				})
			},
			recursion(arr){
				if (arr.children && arr.children.length > 0) {
				    arr.children.forEach(element => {
				        this.recursion(element)
				    })
				} else {
				    this.outlets.push({id:arr.id,name:arr.name})
				}
			},
			search(){
				const newList = this.chooseUserList.filter(item=>item.realName.indexOf(this.searchText) !== -1)
				this.chooseUserListBak = newList
			},
			search2(){
				const newList = this.chooseUserList.filter(item=>item.realName.indexOf(this.searchText2) !== -1)
				this.chooseUserListBak2 = newList
			},
			handleCopy(value){
				if(!uni.setClipboardData)return
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: ()=>{
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
					},
				});
			},
			handleQuery() {
				this.query.page = 1
				this.listData = []
				this.getList();
				this.$refs.draw.close()
			},
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			initUserList() {
				this.$api.request(getUser,{
					method: 'get',
				}).then(res=>{
					if(res.success){
						this.chooseUserList = res.data.row
						this.chooseUserListBak.push(...res.data.row)
						this.chooseUserListBak2.push(...res.data.row)
					}
				}).catch(()=>{
				})
			},
			getTreeData() {
				this.$api.request(getTree,{
					method: 'get',
				}).then(res=>{
					if(res.success){
						// const result = []
						// res.data.list.map(item=>{
						// 	if(item.children && item.children.length > 0){
						// 		result.push(item)
						// 	}
						// })
						this.range = res.data.list
					}
				}).catch(()=>{
				})
			},
			showDrawer(){
				this.$refs.draw.open()
			},
			goDetail(){
				// uni.navigateTo({
				// 	url:`/pages/form/devops/form1/form1`
				// })
			},
			pickerSelectConfim(key,e){
				const {item} = e
				const {id, name} = item
				this.query.id  = id
				this.outletName = name
				this.handleQuery()
			},
			pickerConfim(key, item){
				const {code, codeName} = item
				this.query[key] = code
				this.query[key+'Name'] = codeName
			},
			handleAdd(){
				
			},
			getList(loadMore = false){
				this.status = 'loading';
				this.$api.request(listQuery,{
					method: 'get',
					data: this.query
				}).then(res=>{
					console.log(res)
					if(res.success) {
						const data = res.data
						const {rows} = data
						if(rows.length === 0 || data.total <= this.query.limit){
							this.status = ''
						}
						if(loadMore){
							this.listData = [...this.listData,...rows]
						}else{
							this.listData  = rows
						}
						this.last_id = this.listData[this.listData.length - 1];
						console.log(this.listData)
						this.reload = false;
					}
				}).catch((e)=>{
					console.log(e)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.page-content-list{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		.content-list-cell{
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
	.order-item{
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.order-item-content{
			margin-top: 30upx;
			.order-content-row{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;
				.order-btn{
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}
				.label{
					flex: 0 0 200upx;
					color: #5A5A5A;
					text-align: left;
					font-size: 26upx;
				}
				.value{
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;
					&.text-left{
						text-align: left;
						padding-left: 20upx;
					}
				}
			}
			
		}
			
		.order-item-header{
			display: flex;
			align-items: center;
			.icon{
				margin-right: 10upx;
			}
			text{
				color: #333;
				font-size: 26upx;
				&.green{
					color:#2AD51D;
				}
			}
			
		}
	}
</style>
